<template>
	<view>
		<view class="head">
			<u-navbar title="积分行权至流转平台" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="transparent">
			</u-navbar>
			<view class="flex justify-between m-lr-30 m-tb-40">
				<view class="text-white">
					<view class="font-13">可使用积分</view>
					<view class="font-24 text-bold margin-top-sm">{{walletInfo.shopPoints || 0}}</view>
				</view>
				<view class="record-btn" @click="toRecord">行权记录</view>
			</view>
			<view class="bg-white margin radius-6 padding-lr p-t-20 p-b-15">
				<view>
					<text class="font-17 text-black3 text-bold">积分转换</text>
					<text class="padding-left-xs">转换比例（70%贡献值 : 30%预消费）</text>
				</view>
				<view class="form-box">
					<view class="item">
						<input type="number" placeholder="请输入行权积分数量" v-model="amount" />
						<view class="all-btn" @click="handleAll">全部</view>
					</view>
				</view>
				<view class="margin-top">预计获得：<text class="text-theme">{{handelAmount1()}}</text>贡献值 : <text class="text-theme m-l-5">{{handelAmount2()}}</text>预消费</view>
				<view class="bottomBtn" @tap="exchange">确认行权</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		pointsConvertAsset,
		wallet
	} from '@/common/api/customer.js'
	export default {
		data() {
			return {
				amount: '',
				walletInfo: {}
			};
		},
		onLoad() {
			this.getWallet()
		},
		methods: {
			toRecord() {
				uni.navigateTo({
					url: '/pages/my/wallet/exchangeRecords'
				})
			},
			handleAll() {
				this.amount = this.walletInfo.shopPoints || 0
			},
			handelAmount1() {
				return (this.amount*0.7).toFixed(2) || 0
			},
			handelAmount2() {
				return (this.amount*0.3).toFixed(2) || 0
			},
			// 获取用户钱包
			getWallet() {
				wallet().then(res => {
					this.walletInfo = res.data || {}
				})
			},
			exchange() {
				if(!this.amount) {
					return this.$msg('请输入行权积分数量')
				}
				if(this.amount < 20) {
					return this.$msg('行权积分数量必须大于20')
				}
				uni.showLoading({
					title: '行权中',
					mask: true
				})
				pointsConvertAsset({amount: this.amount}).then(res => {
					uni.hideLoading()
					this.$msg(res.msg)
					if(res.code == 200) {
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} 
				}).catch(err => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F2F3F5;
	}
</style>
<style lang="scss" scoped>
	.head {
		background-image: url('/static/my/xq-bg.png');
		background-size: 100% 100%;
	}
	.record-btn {
		width: 148rpx;
		height: 48rpx;
		background: #FFFFFF;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		opacity: 1;
		border: 1rpx solid #FA3121;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FA3121;
	}
	.form-box {
		width: 100%;
		border-radius: 16rpx;
		background: #F2F3F5;
		margin-top: 30rpx;
		.item {
			display: flex;
			align-items: center;
			width: 100%;
			
			input {
				font-size: 28rpx;
				flex: 1;
				display: block;
				height: 92rpx;
				line-height: 92rpx;
				outline: none;
				border: 0px;
				padding-left: 30rpx;
			}
			input::placeholder {
				font-size: 28rpx;
				color: #999999;
			}
			.all-btn {
				width: 200rpx;
				height: 76rpx;
				background: linear-gradient(42deg, #FF0804 0%, #FC7844 100%);
				font-size: 32rpx;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 16rpx;
				margin-right: 8rpx;
			}
		}
	}

	.bottomBtn {
		width: 622rpx;
		height: 88rpx;
		background: linear-gradient(42deg, #FF0804 0%, #FC7844 100%);
		box-shadow: 0 2rpx 10rpx 1rpx rgba(250,49,33,0.24);
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		color: #ffffff;
		margin: 80rpx auto 30rpx auto;
	}
</style>